<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
</head>

<body class="login-bg">

<div class="login">
    <div class="message">用户登录</div>
    <div id="darkbannerwrap"></div>

    <form method="post" class="layui-form" id="userForm">
        <input name="tel" placeholder="手机号："  type="text" lay-verify="required" class="layui-input" >
        <hr class="hr15">
        <input name="login_pwd" placeholder="密码："  type="password" lay-verify="required" class="layui-input">
        <hr class="hr15">
        <div>
            <button class="layui-btn layui-btn-normal" type="submit" lay-submit lay-filter="telLogin" style="width: 340px">登录</button>
            <hr class="hr15">
            <button class="layui-btn layui-btn-normal" type="button" onclick="changeForm(1)" style="width: 340px">使用邮箱登录</button>
            <span id="toast1" style="color:red"></span>
        </div>
    </form>

    <form method="post" class="layui-form" style="display: none" id="emailForm">
        <input name="email" id="email" placeholder="邮箱："  type="text" lay-verify="email" class="layui-input" >
        <hr class="hr15">
        <input name="code" id="code" placeholder="验证码："  type="text" class="layui-input" style="width: 160px; display: inline-block">
        <button class="layui-btn layui-btn-normal" type="submit" lay-submit lay-filter="sendCode" style="width: 140px; display: inline-block; margin-left: 20px">发送验证码</button>
        <hr class="hr15">
        <button class="layui-btn layui-btn-normal" type="submit" lay-submit lay-filter="emailLogin" style="width: 340px">登录</button>
        <hr class="hr15">
        <button class="layui-btn layui-btn-normal" type="button" onclick="changeForm(0)" style="width: 340px">使用手机号登录</button>
        <span id="toast0" style="color:red"></span>
    </form>
</div>

</body>
</html>

<script>
    //邮箱登录和用户登录表单切换
    function changeForm(num){
        if(num==1){
            //显示 邮箱登录表单
            $("#emailForm").show();
            //隐藏 用户登录表单
            $("#userForm").hide();
        }else{
            //显示 用户登录表单
            $("#userForm").show();
            //隐藏 邮箱登录表单
            $("#emailForm").hide();
        }
    }

    $(function  () {
        layui.use('form', function(){
            var form = layui.form;
            //手机号登录-监听telLogin提交
            form.on('submit(telLogin)', function(data){
                $.ajax({
                    //调用控制层的telLogin方法，发送aiax请求
                    url:"/login/telLogin", //控制类访问路径
                    type:"post",
                    data:data.field,
                    dataType:"json", //返回的数据类型
                    success:function (data) {
                        //定义数据格式{info:"登录成功"}
                        $("#toast1").text(data.info);
                        if(data.info == "登录成功"){
                            //进入index页面
                            window.location.href = "/index/homePage";
                        }
                    }
                })
                return false;
            });

            //发送验证码
            form.on('submit(sendCode)', function(data){
                //发送aiax请求
                $.ajax({
                    url:"/login/sendCode", //控制类访问路径
                    type:"post",
                    data:data.field,
                    dataType:"json", //返回的数据类型
                    success:function (data) {
                        //定义数据格式{info:"登录成功！"}
                        $("#info").text(data.info);
                    }
                })
                return false;
            });

            //邮箱登录-监听提交
            form.on('submit(emailLogin)', function(data){
                //验证 邮箱验证码不能为空
                if(data.field.code==""){
                    layer.alert("邮箱验证码不能为空");
                    return false;
                }
                //发送 ajax请求
                $.ajax({
                    url:"/login/emailLogin",
                    type:"post",
                    data:data.field,
                    dataType:"json",//返回的数据类型
                    success:function(data){
                        //定义{info:"登录成功"}
                        $("#toast1").text(data.info);
                        if(data.info == "邮箱登录成功"){
                            window.location.href="/index/homePage";
                        }
                    }
                })
                return false;
            });
        });
    })
</script>